<template>
    <div>
        <headers v-if="$slots.header">
            <slot name="header"></slot>
        </headers>
        <main>
            <slot>main</slot>
        </main>
        <footer>
            <slot name="footer">footer</slot>
        </footer>
        <div>
            <slot :name="Name"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const Name=ref('dynamicSlotName')
</script>

<style lang="scss">
header{
    background-color: goldenrod;
}
</style>